<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-11 17:44:03
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-06-27 11:47:18
 * @FilePath: \ant-design-vue-jeecg-master\src\views\netResourceManagement\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="netResource">
    <div>
      <a-button type="primary" @click="statistics">分析</a-button>
      <a-table :columns="columns" @expand="handleExpand" :data-source="data" bordered>
        <!-- <span slot="action" slot-scope="text, record">
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
        </span> -->
        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
        </a-table>
      </a-table>
    </div>
    <div class="chartDisplay">
      <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol" :style="{ width: '58%' }">
        <!-- <a-form-model-item ref="name" label="时隙占用情况" prop="name">
        <div class="tableContainer">
          <div
            class="tableItem"
            :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
            :key="index + 'timeSoltq'"
            v-for="(item, index) in statusList"
          >
            <a-tooltip v-if="item.status === 2">
              <template slot="title"> {{ item.label }} </template>
              <span class="tableItem-label"></span>
            </a-tooltip>

            <span v-else class="tableItem-label"></span>
          </div>
        </div>
      </a-form-model-item> -->
        <a-form-model-item ref="name" label="频道占用情况" prop="name">
          <!-- <div class="tableContainer">
            <div
              class="tableItem"
              :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
              :key="index + 'timeSolt'"
              v-for="(item, index) in statusList1"
            >
              <a-tooltip v-if="item.status === 2">
                <template slot="title"> {{ item.label }} </template>
                <span class="tableItem-label"></span>
              </a-tooltip>

              <span v-else class="tableItem-label"></span>
            </div>
          </div> -->
          <pool ref="pool" :total="1920" :small="2" :style="{ height: '500px', 'overflow-y': 'auto' }" />
        </a-form-model-item>
      </a-form-model>

      <div id="missileCharts"></div>
    </div>

    <statistics ref="statistics" />
  </div>
</template>

<script>
import statistics from './modules/statistics.vue'
import pool from '../taskManagement/modules/resourcePool1'
import { getAction } from '../../api/manage'
import * as echarts from 'echarts'
export default {
  components: {
    pool,
    statistics,
  },
  data() {
    const columns = [
      {
        title: '指挥车名称',
        dataIndex: 'name',
        key: 'name',
        // slots: { title: 'customTitle' },
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '信道号分配总数（个）',
        dataIndex: 'total',
        key: 'total',
      },
      {
        title: '信道号使用总数（个）',
        dataIndex: 'usage',
        key: 'usage',
      },
      {
        title: '信道号使用率',
        dataIndex: 'rate',
        key: 'rate',
      },
      // {
      //   title: '资源统计表',
      //   children: [
      //     {
      //       title: '指挥车名称',
      //       dataIndex: 'name',
      //       key: 'name',
      //       // slots: { title: 'customTitle' },
      //       // scopedSlots: { customRender: 'name' },
      //     },
      //     {
      //       title: '指控车频率资源使用状态',
      //       children: [
      //         {
      //           title: '上行频点号',
      //           dataIndex: 'upFrequencyNo',
      //           key: 'upFrequencyNo',
      //         },
      //         {
      //           title: '下行频点号',
      //           dataIndex: 'downFrequencyNo',
      //           key: 'downFrequencyNo',
      //         },
      //       ],
      //     },
      //     {
      //       title: '指控车时隙资源使用状态',
      //       dataIndex: 'slotUsage',
      //       key: 'slotUsage',
      //     },
      //     {
      //       title: '导弹资源使用状态',
      //       children: [
      //         {
      //           title: '导弹1',
      //           dataIndex: 'terminal1',
      //           key: 'terminal',
      //         },
      //         {
      //           title: '导弹2',
      //           dataIndex: 'terminal2',
      //           key: 'terminal2',
      //         },
      //         {
      //           title: '导弹3',
      //           dataIndex: 'terminal3',
      //           key: 'terminal3',
      //         },

      //         {
      //           title: '导弹4',
      //           dataIndex: 'terminal4',
      //           key: 'terminal4',
      //         },
      //       ],
      //     },
      //   ],
      // },

      // {
      //   title: 'Action',
      //   key: 'action',
      //   scopedSlots: { customRender: 'action' },
      // },
    ]
    const innerColumns = [
      {
        title: '导弹名称',
        dataIndex: 'ballName',
        key: 'ballName',
      },
      {
        title: '信道号分配总数',
        dataIndex: 'totalAllocation',
        key: 'totalAllocation',
      },
      {
        title: '信道号使用总数',
        dataIndex: 'totalUsage',
        key: 'totalUsage',
      },
      {
        title: '信道分配编号',
        dataIndex: 'allocationNo',
        key: 'allocationNo',
      },
      {
        title: '信道使用编号',
        dataIndex: 'usageNo',
        key: 'usageNo',
      },
      {
        title: '信道使用率',
        dataIndex: 'usageRate',
        key: 'usageRate',
      },
      {
        title: '发射车经度（°）',
        dataIndex: 'lng',
        key: 'lng',
      },
      {
        title: '发射车纬度（°）',
        dataIndex: 'lat',
        key: 'lat',
      },
    ]
    const data = [
      {
        key: '1',
        name: '指控车1',
        status: '入网',
        upFrequencyNo: 'F1',
        downFrequencyNo: 'F2',
        slotUsage: '1,,2,3,4,5,6',
        terminal1: 1,
        terminal2: 2,
        terminal3: 3,
        terminal4: 4,
        usage: 30,
        total: 60,
        rate: '50%',
        childrenBall: [
          {
            key: '1-1',
            ballName: '导弹1',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-2',
            ballName: '导弹2',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-3',
            ballName: '导弹3',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          // {
          //   key: '1-4',
          //   ballName: '导弹4',
          //   totalAllocation: 20,
          //   totalUsage: 10,
          //   allocationNo: 10,
          //   usageNo: 12,
          //   usageRate: '15%',
          //   lng: 109,
          //   lat: 34,
          //   hei: 15000,
          // },
          // {
          //   key: '1-5',
          //   ballName: '导弹5',
          //   totalAllocation: 20,
          //   totalUsage: 10,
          //   allocationNo: 10,
          //   usageNo: 12,
          //   usageRate: '15%',
          //   lng: 109,
          //   lat: 34,
          //   hei: 15000,
          // },
        ],
      },
      // {
      //   key: '2',
      //   name: '指控车2',
      //   upFrequencyNo: 'F1',
      //   downFrequencyNo: 'F2',
      //   slotUsage: '7,8,9,10,11,12',
      //   terminal1: 11,
      //   terminal2: 21,
      //   terminal3: 31,
      //   terminal4: 41,
      // },
      // {
      //   key: '3',
      //   name: '指控车3',
      //   upFrequencyNo: 'F1',
      //   downFrequencyNo: 'F2',
      //   slotUsage: '13,14,15,16,17,18',
      //   terminal1: 12,
      //   terminal2: 22,
      //   terminal3: 32,
      //   terminal4: 42,
      // },
      // {
      //   key: '4',
      //   name: '指控车4',
      //   upFrequencyNo: 'F1',
      //   downFrequencyNo: 'F2',
      //   slotUsage: '19,20,21,22,23,24,25,26,27,28,29,30',
      //   terminal1: 12,
      //   terminal2: 23,
      //   terminal3: 34,
      //   terminal4: 45,
      // },
    ]
    return {
      data,
      columns,
      form1: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      statusList: [
        { label: '1', status: 0 },
        { label: '2', status: 0 },
      ],
      statusList1: [],
      listParams: [{ label: '15指挥车网络状态上报' }, { label: '16导弹网络状态上报' }],
      url: {
        getGridValueByCode: '/grid/nmcRelationPackageGrid/detail/list',
      },
      innerColumns,
      innerData: [],
    }
  },
  activated() {
    this.statusList1 = []
    this.statusList = []
    // this.init()
    // this.getList()
  },
  // created() {
  //   this.init()
  //   this.getList()
  // },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.init()
    this.getList()
    // 2绿色 0灰色 1空白
    // this.statusList1[1].status = 2
    // this.statusList1[1].label = '通信指控车1导弹2'
    // this.statusList1[0].status = 2
    // this.statusList1[0].label = '通信指控车1导弹1'
    // this.statusList[1].status = 2
    // this.statusList[1].label = '通信指控车1'
    // this.statusList[2].status = 2
    // this.statusList[2].label = '通信指控车2'
  },
  methods: {
    handleExpand(expanded, record) {
      console.log(expanded, record)
      if (expanded) this.innerData = [...JSON.parse(JSON.stringify(record.childrenBall))]
    },
    init() {
      for (let i = 0; i < 1920; i++) {
        this.statusList1.push({ label: i + 1, status: 0 })
      }
    },
    initChart() {
      var chartDom = document.getElementById('missileCharts')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold',
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '占用' },
              { value: 735, name: '未占用' },
              // { value: 735, name: '未占用', itemStyle: { color: '#fff' } },
            ],
          },
        ],
      }

      option && myChart.setOption(option)
    },
    hex2int(hex) {
      var len = hex.length,
        a = new Array(len),
        code
      for (var i = 0; i < len; i++) {
        code = hex.charCodeAt(i)
        if (48 <= code && code < 58) {
          code -= 48
        } else {
          code = (code & 0xdf) - 65 + 10
        }
        a[i] = code
      }
      return a.reduce(function (acc, c) {
        acc = 16 * acc + c
        return acc
      }, 0)
    },
    Turns(str, type) {
      if (type == 16) {
        //8位二进制数转2位十六进制数
        let d = []
        let c = str
        for (let i = 0; i < c.length; i += 8) {
          d.push(c.slice(i, i + 8))
        }
        let items = ''
        d.forEach((item) => {
          // 把num当做2进制的值 转换为10进制
          item = JSON.parse(JSON.stringify(parseInt(item, 2).toString(16))).padStart(2, 0)
          items += item
        })
        return items.toUpperCase()
      } else if (type == 2) {
        //十六进制转8位二进制数
        let d = []
        let c = str
        for (let i = 0; i < c.length; i += 2) {
          d.push(c.slice(i, i + 2))
        }
        let items = ''
        d.forEach((item) => {
          item = JSON.parse(JSON.stringify(parseInt(item, 16).toString(2))).padStart(8, 0)
          items += item
        })
        return items
      } else if (type == 4) {
        let d = []
        let c = str
        for (let i = 0; i < c.length; i += 4) {
          d.push(c.slice(i, i + 4))
        }
        let items = []
        d.forEach((item) => {
          item = this.hex2int(item)
          console.log(item, '2525')
          // item = JSON.parse(JSON.stringify(parseInt(item, 16).toString(2))).padStart(8, 0)
          items.push(item)
        })
        return items
      }
    },
    getList() {
      getAction(this.url.getGridValueByCode, { packageCode: '15指挥车网络状态上报', pageSize: -1 }).then((res) => {
        let result = res.result.records
        this.data[0].upFrequencyNo = result.find((item) => item.gridName == '15-星指上行链路频点号').latestValue
        this.data[0].downFrequencyNo = result.find((item) => item.gridName == '15-星指下行链路频点号').latestValue
        let vales = result.find((item) => item.gridName == '15-该车使用的具体时隙号').latestValue
        this.trunSlot(vales)
      })
      getAction(this.url.getGridValueByCode, { packageCode: '16导弹网络状态上报', pageSize: -1 }).then((res) => {
        let result = res.result.records
        this.data[0].terminal1 = this.Turns(
          result.find((item) => item.gridName == '16-DD1使用上行信道1').latestValue,
          4
        )
        this.data[0].terminal2 = this.Turns(
          result.find((item) => item.gridName == '16-DD1使用上行信道2').latestValue,
          4
        )
        this.data[0].terminal3 = this.Turns(
          result.find((item) => item.gridName == '16-DD1使用上行信道3').latestValue,
          4
        )
        this.data[0].terminal4 = this.Turns(
          result.find((item) => item.gridName == '16-DD1使用上行信道4').latestValue,
          4
        )

        let arr = [this.data[0].terminal4, this.data[0].terminal3, this.data[0].terminal2, this.data[0].terminal1]

        arr.forEach((i) => {
          if (this.$refs.pool.subData.find((item) => item.id == i)) {
            this.$refs.pool.subData.find((item) => item.id == i).check = true
          }
        })
        // arr.forEach((i) => {
        //   that.statusList1.forEach((item) => {
        //     console.log(item, 'item')
        //     if (item.label == i) {
        //       item.status = 2
        //     }
        //   })
        // })

        // this.trunSlot(vales)
      })
    },
    trunSlot(vales) {
      let tempData = vales.slice(-8)
      let data = this.Turns(tempData, 2).split('')
      let Arr = []
      data.forEach((item, index) => {
        if (item == 0) Arr.push(data.length - index)
      })
      let endResult = Arr.reverse()
      const that = this
      endResult.forEach((i) => {
        that.statusList.forEach((item) => {
          if (item.label == i) {
            item.status = 2
          }
        })
      })
      // this.statusList.find()
      this.data[0].slotUsage = endResult.join(',') //时隙号
    },
    statistics() {
      this.$refs.statistics.showModal()
    },
  },
}
</script>

<style lang="less" scoped>
.tableContainer {
  width: 90%;
  display: flex;
  // border: solid 0.1px;
  flex-wrap: wrap;
  .tableItem {
    width: 30px;
    height: 30px;
    border: solid 0.1px;
    .tableItem-label {
      display: inline-block;
      line-height: 30px;
      width: 30px;
      height: 30px;
    }
  }
}
.netResource {
  .ant-checkbox-group {
    // height: 300px;
    line-height: 0.9;
    .ant-checkbox-wrapper {
      margin: 0;
    }
    .ant-col {
      width: auto;
      margin: 0;
    }
  }
}
.employ {
  background-size: 25px 25px;
  background-color: rgb(123, 243, 93);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(133, 201, 56, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(139, 248, 96, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.empty {
  background-size: 50px 50px;
  background-color: rgb(68, 69, 70);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
#missileCharts {
  width: 500px;
  height: 500px;
}
.chartDisplay {
  display: flex;
}
</style>
